<html>
<head>

<style for="train-pagination-1">

    @keyframes lineA{
        0%,100%{clip-path:inset(0 0 calc(100% - 4px) 0)}
        25%{clip-path:inset(0 calc(100% - 4px) 0 0)}
        50%{clip-path:inset(calc(100% - 4px) 0 0 0)}
        75%{clip-path:inset(0 0 0 calc(100% - 4px))}
    }
    @keyframes lineB{
        0%,100%{clip-path:inset(calc(100% - 4px) 0 0 0)}
        25%{clip-path:inset(0 0 0 calc(100% - 4px))}
        50%{clip-path:inset(0 0 calc(100% - 4px) 0)}
        75%{clip-path:inset(0 calc(100% - 4px) 0 0)}
    }


    .pagination-wrap {
        padding: 20px;
        margin: 100px auto;
        width: 648px;
        height: 170px;
    }

    .pagination.zebra-line{

        border-image:url(/img/green-zebra.png) 10 10 repeat repeat;

        position: relative;
        left: -40px;
        width: 100%;
        height: 200px;
        padding: 50px 30px 20px 0px;
    }

    .flow-border {
        position: relative;
        z-index: 3;
    }

    .flow-border::after,
    .flow-border::before {
        margin-top: -30px;
        margin-bottom: -30px;
        border:10px double rgb(207, 230, 149);
        -webkit-border-image:url(/img/green-zebra.png) 20 20 stretch;
    }

    .flow-border::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
        z-index: -1;
        -webkit-animation: lineA 6s linear infinite;
        -o-animation: lineA 6s linear infinite;
        animation: lineA 6s linear infinite;
    }

    .flow-border::after {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
        z-index: -1;
        -webkit-animation: lineB 6s linear infinite;
        -o-animation: lineB 6s linear infinite;
        animation: lineB 6s linear infinite;
    }

    .pagination {
        /*width: 648px;*/
        text-align: center;
    }

    .train {
        margin: 10px auto;
        width: 80%;
        position: relative;
        font-size: 0;
        height: 65px;
    }

    .train:after { /*这是画铁路*/
        content: '';
        position: absolute;
        bottom: -2px;
        left: 0;
        width: 100%;
        height: 10px;
        background-image: url(/img/green-zebra.png);
        background-size: 710px 347px;
        background-position: -20px 0;
        background-repeat: no-repeat;
    }

    .pagination ul {
        text-align: center;
    }

    ul, li {
        display: inline-block;
    }

    .train li.train-head,
    .train li {
        position: relative;
        font-size: 12px;
        display: inline-block;
    }

    .train li {
        padding-top: 20px;
        padding-left: 10px;
        width: 84px;
        height: 12px;
        background-color: rgba(100, 200, 100, .2);
        background-image: url(/img/train-pagination-bg.jpg);
        background-size: 340px 55px;
        background-position: left -24px top -8px;
        background-repeat: no-repeat;
        line-height: 0px;
    }

    .train li:after { /*这是车箱底盘以下和轮子下半截*/
        content: '';
        position: absolute;
        left: 2px;
        bottom: -25px;
        width: 100px;
        height: 25px;
        background-image: url(/img/train-pagination-bg.jpg);
        background-size: 360px 112px;
        background-position: left -128px bottom -8px;
        background-repeat: no-repeat;
        -webkit-filter: hue-rotate(100deg) saturate(50%) grayscale(50%);;
        -moz-filter: hue-rotate(100deg) saturate(50%) grayscale(50%);;
        -ms-filter: hue-rotate(100deg) saturate(50%) grayscale(50%);;
        filter: hue-rotate(100deg) saturate(50%) grayscale(50%);
    }

    .train li:last-of-type:after { /*这是车箱底盘以下和轮子下半截*/
        content: '';
        position: absolute;
        left: 2px;
        bottom: -25px;
        width: 84px;
        height: 25px;
        background-image: url(/img/train-pagination-bg.jpg);
        background-size: 360px 110px;
        background-repeat: no-repeat;
    }

    .train li.train-head,
    .train li.train-head:before {
        width: 90px;
        background-color: rgba(100, 200, 100, .2);
        background-image: url(/img/train-pagination-bg.jpg);
        background-repeat: no-repeat;
    }

    .train li.train-head:before {
        position: absolute;
        left: 0;
        background-size: 300px 66px;
    }

    .train li.train-head {
        background-size: 360px 65px;
        height: 37px;
        top: -2px;
        background-position: right -42px bottom 5px;
    }

    .train li.train-head:before {
        content: '';
        top: 6px;
        left: 4px;
        font-size: 12px;
        display: inline-block;
        height: 34px;
        width: 56px;
        background-size: 274px 58px;;
        background-position: -28px -14px;
        background-image: url(/img/train-pagination-bg.jpg);
        background-repeat: no-repeat;
    }

    .train li.train-head:after {
        bottom: -2px;
        left: 0px;
        width: 102px;
        background-position: left -223px bottom -8px;
    }

    .train li {
        -webkit-filter: saturate(62%) grayscale(5%);;
        -moz-filter: saturate(62%) grayscale(5%);
        -ms-filter: saturate(62%) grayscale(5%);
        filter: saturate(65%) grayscale(5%);
    }

    .train li#page-wrap {
        position: relative;
        top: -14px;
        padding-top: 14px;
        padding-left: 0;
        padding-bottom: 6px;
        padding-right: 10px;
    }


    .train a {
        position: relative;
        display: inline-block;
        /*display: block;*/
        height: 18px;
        width: 57px;
        text-align: center;
        color: #2a4;
    }

    .train a span {
        width: 60px;
        height: 20px;
        display: inline-block;
        position: absolute;
        left: -9px;
    }

    .train a:hover {
        color: #2f3;
    }

    #page-wrap a .page-input {
        outline: 0px;
        border: 0;
        margin: 0;
        margin-left: 4px;
        font-size: 12px;
        width: 61px;
        height: 11px;
        text-align: center;
        color: #2f3;
    }

    #page-wrap a{
        left: -4px;
    }

    .train .train-head a {
        left: -8.5px;
        top: -3px;
    }

    .train .train-head a span {
        width: 52px;
        height: 20px;
        line-height: 9px;
    }

</style>

</head>
<body>
<<<<<<< HEAD

=======
>>>>>>> 942884a74b91d9c4f15cfc13834d9fb83a9410e1
<div class="pagination-wrap">
    <div class="pagination flow-border zebra-line">
        <ul class="pagination-control-bar pagination train railway">
            <li class="disabled"><a><span>上一页</span></a></li>
            <li><a class="current"><span>第一页</span></a></li>
            <li id="page-wrap">
                <a href="/article/200">
                    <input placeholder="第1页" id="page" class="page-input" name="page" type="text">
                </a>
            </li>
            <li><a class=""><span>下一页</span></a></li>
            <li class="train-head"><a><span>尾页</span></a></li>
        </ul>
        <ul class="pagination-list pagination train railway">
            <li><a href="/article/2000"><span>1</span></a></li>
            <li><a href="/article/2000"><span>2</span></a></li>
            <li><a href="/article/2000"><span>3</span></a></li>
            <li><a href="/article/2000"><span>4</span></a></li>
            <li><a href="/article/2000"><span>5</span></a></li>
        </ul>
    </div>
</div>
<<<<<<< HEAD

=======
>>>>>>> 942884a74b91d9c4f15cfc13834d9fb83a9410e1
</body>
</html>
